@import "./gen.scss";
@import "./variables.scss";

html, body { height: 100%; }
body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight: normal; }
body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; color: $global-font; -webkit-text-size-adjust: none; background-color: $body-bg; font-size: 14px; overflow-y: hidden; padding: 0 !important; }
header, section, footer { display: block; margin: 0; padding: 0; }
img { border: 0; margin: 0; padding: 0; vertical-align: middle; }
a { text-decoration: none; color: $global-font; }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
textarea { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; }
table { border-spacing: 0; border-collapse: collapse; }


/*布局--浮动*/
.fl { float: left !important; }
.fr { float: right !important; }
.fn { float: none !important; }


/*布局--网格*/
.flex { display: flex; }
.flex-align-center { display: flex; align-items: center; }
.flex-justify-center { display: flex; justify-content: center; }
.flex-justify-right { display: flex !important; justify-content: right; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-1 { flex: 1; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }


/*布局--定位*/
.posa { position: absolute !important; }
.posr { position: relative !important; }
.poss { position: static !important; }
.posf { position: fixed !important; }


/*布局--转换*/
.dispn { display: none !important; }
.dispb { display: block !important; }
.displ { display: inline !important; }
.dispi { display: inline-block !important; }
.dispt { display: table !important; }
.dispit { display: inline-table !important; }
.dispc { display: table-cell; vertical-align: middle; text-align: center; }


/*布局--显隐*/
.ovfh { overflow: hidden !important; }
.ovfa { overflow: auto !important; }
.ovfs { overflow: scroll !important; }
.ovfsx { overflow-x: scroll !important; }
.ovfsy { overflow-y: scroll !important; }


/*布局--对齐*/
.textc { text-align: center !important; }
.textl { text-align: left !important; }
.textr { text-align: right !important; }
.textj { text-align: justify !important; }
.textj:after { display: inline-block; content: ""; width: 100%; height: 0; visibility: hidden; }


/* 字体--粗细 */
.fw-3 { font-weight: 300 !important; }
.fw-5 { font-weight: 500 !important; }
.fw-b { font-weight: bold !important; }


/* 字体--尺寸 */
@include gen-fontsize;


/* 宽度 */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.wh-max100 { max-width: 100%; max-height: 100%; }
.w-50 { width: 50% !important; }
.w-33 { width: 33.33% !important; }
.w-25 { width: 25% !important; }
.w-20 { width: 20% !important; }
.w-e1 { width: 1em !important; }
.w-e2 { width: 2em !important; }
.w-e3 { width: 3em !important; }
.w-e4 { width: 4em !important; }
.w-e5 { width: 5em !important; }
.w-e6 { width: 6em !important; }
.w-e7 { width: 7em !important; }
.w-e8 { width: 8em !important; }
.w-e9 { width: 9em !important; }
.w-e10 { width: 10em !important; }
.w-e15 { width: 15em !important; }


/* 边距 */
.mar-auto { margin: 0 auto !important; }
@include gen-margin(margin,left);
@include gen-margin(margin,right);
@include gen-margin(margin,top);
@include gen-margin(margin,bottom);
@include gen-margin(margin,all);
@include gen-margin(margin,horizontal);
@include gen-margin(margin,vertical);
@include gen-margin(padding,left);
@include gen-margin(padding,right);
@include gen-margin(padding,top);
@include gen-margin(padding,bottom);
@include gen-margin(padding,all);
@include gen-margin(padding,horizontal);
@include gen-margin(padding,vertical);

/* 其他 */ 
.headlines { font-size: 16px; margin-bottom: 20px; padding-left: 10px; border-left: 3px solid $color-primary; color:  $color-primary; user-select: none; }


/* 字体颜色 */
.primary { color: $color-primary; }
.success { color: $color-success; }
.warning { color: $color-warning; }
.danger { color: $color-danger; }
.info { color: $color-info; }
